<!--
 * @Author: 赵成刚-运输单
-->
<template>
  <view class="content">
    <view class="tabs-cont">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <view>
      <view class="card-list" v-if="dataList">
        <radio-group>
          <view
            v-for="(item1, index) in dataList"
            :key="index"
            style="margin-bottom: 20rpx"
          >
            <myRecommendation
              :myRecommendation="item1"
              :dataSourcesType="current"
              @dispatchSend="dispatchSend"
              @dispatchCancelSend="dispatchCancelSend"
              @dispatchLoad="dispatchLoad"
              @dispatchArrive="dispatchArrive"
              @dispatchPhotoArrive="dispatchPhotoArrive"
              @dispatchEvaluate="dispatchEvaluate"
              @routeJumpBtn="routeJumpBtn"
            />
          </view>
        </radio-group>
      </view>
      <u-empty
        text="列表为空"
        class="kong"
        mode="list"
        v-if="dataList.length === 0"
      ></u-empty>
      <u-loadmore
        v-if="dataList.length"
        bg-color="rgb(240, 240, 240)"
        :status="loadStatus"
      ></u-loadmore>
    </view>
    <!-- 运费结算 -->
    <freightSettlementModal
      :freightSettlementShow="freightSettlementShow"
      @confirm="freightSettlementconfirm"
      @cancel="freightSettlementcancel"
    />
    <!-- 评价货主 -->
    <evaluatetheownerModal
      :staticObj="obj"
      :evaluatetheownerShow="evaluatetheownerShow"
      @evaluatetheownercancel="evaluatetheownercancel"
      @evaluatetheownerconfirm="evaluatetheownerconfirm"
    />
    <!-- 装货信息弹窗 -->
    <loadinginformationModal
      :loadinginformationShow="loadinginformationShow"
      @confirm="loadinginformationconfirm"
      @cancel="loadinginformationcancel"
    />
    <!-- 到货信息弹窗 -->
    <arrivalinformationModal
      :arrivalinformationModalShow="arrivalinformationModalShow"
      @confirm="arrivalinformationconfirm"
      @cancel="arrivalinformationcancel"
    />
    <!-- 到货信息图片弹窗 -->
    <arrivalinformationPhotoModal
      :arrivalinformationModalShow="arrivalinformationPhotoModalShow"
      @confirm="arrivalinformationPhotoconfirm"
      @cancel="arrivalinformationPhotocancel"
    />
    <popSearchModal
      :popSearchShow="popSearchShow"
      @getDataList="getDataList"
      @closePop="closePop"
      class="popModal"
      :page="'waybill'"
    />
    <C_tabbar
      :routePath="'pages/drivertabbar/waybill/waybill'"
      class="tabbar-class"
    ></C_tabbar>
  </view>
</template>

<script>
import { d_resNull } from 'common/util.js'
import myRecommendation from './components/myRecommendation.vue'
import C_tabbar from './../../../components/C_tabbar/index'
import freightSettlementModal from './components/freightSettlementModal.vue'
import evaluatetheownerModal from './components/evaluatetheownerModal.vue'
import loadinginformationModal from './components/loadinginformationModal.vue'
import arrivalinformationModal from './components/arrivalinformationModal.vue'
import arrivalinformationPhotoModal from './components/arrivalinformationPhotoModal.vue'
import popSearchModal from './../../../components/C_popSearch/index.vue'
export default {
  components: {
    myRecommendation,
    C_tabbar,
    freightSettlementModal,
    evaluatetheownerModal,
    loadinginformationModal,
    arrivalinformationModal,
    arrivalinformationPhotoModal,
    popSearchModal,
  },
  data() {
    return {
      popSearchShow: false,
      searchObj: {},
      obj: {},
      current: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loadStatus: 'loadmore',
      dispatchStatus: '0',
      list: [
        {
          name: '全部',
          value: '0',
        },
        {
          name: '运输中',
          value: '2',
        },
        {
          name: '待支付',
          value: '3',
        },
        {
          name: '已完成',
          value: '4',
        },
      ],
      dataList: [], // 全部
      userInfo: {},
      taglistShow: true, //存是否还有值
      freightSettlementShow: false, //运费结算弹窗
      evaluatetheownerShow: false, //评价货主弹窗
      loadinginformationShow: false, //装货信息弹窗
      arrivalinformationModalShow: false, //到货信息弹窗
      arrivalinformationPhotoModalShow: false,
    }
  },
  onLoad(options) {
    if (options.dispatchStatus) {
      this.current = 1
      this.dispatchStatus = options.dispatchStatus
    }
  },
  onNavigationBarButtonTap(e) {
    if (e.text == '筛选') {
      this.popSearchShow = true
    }
  },
  onReachBottom() {
    if (this.taglistShow) {
      this.showLoading()
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.pageNum++
        uni.stopPullDownRefresh()
        this.getDataList()
        this.loadStatus = 'nomore'
      }, 1000)
    } else {
      this.loadStatus = 'nomore'
    }
  },
  // 强制下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1
    this.pageSize = 10
    // this.showLoading()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.getDataList()
    }, 1000)
  },
  onShow() {
    uni.hideTabBar({})
    this.pageNum = 1
    this.getDataList()
  },
  methods: {
    closePop() {
      this.popSearchShow = false
    },
    //清空搜索
    clearBtn() {
      this.searchObj.dispatchCode = ''
      this.pageNum = 1
      this.pageSize = 10

      this.getDataList()
    },
    //搜索
    searchBtn() {
      this.pageNum = 1
      this.pageSize = 10
      this.getDataList()
    },
    showLoading() {
      uni.showLoading({
        title: '加载中',
      })
    },
    hideLoading() {
      uni.hideLoading()
    },
    //运费结算-确认
    freightSettlementconfirm() {
      this.freightSettlementShow = false
    },
    //运费结算-取消
    freightSettlementcancel() {
      this.freightSettlementShow = false
    },
    //评价货主弹窗-开启
    dispatchEvaluate(val) {
      this.obj = val
      this.evaluatetheownerShow = true
    },
    //评价货主弹窗-确认
    evaluatetheownerconfirm(val) {
      this.handleEvaluateConfirm(val)
    },
    //评价货主弹窗-取 消
    evaluatetheownercancel() {
      this.evaluatetheownerShow = false
    },
    // 评价司机确认
    async handleEvaluateConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchEvaluate',
        {
          dispatchId: this.obj.dispatchId,
          evaluate: val,
          evaluateId: this.obj.evaluateId,
        }
      )
      if (code == '0') {
        this.$api.msg('评价成功')
        this.evaluatetheownerShow = false
        this.searchBtn()
      } else {
        this.$api.msg(message)
      }
    },
    //装货弹窗-开启
    dispatchLoad(val) {
      this.obj = val
      this.loadinginformationShow = true
    },
    //装货信息弹窗-确认
    loadinginformationconfirm(val) {
      this.handleLoadConfirm(val)
    },
    //装货信息弹窗-取 消
    loadinginformationcancel() {
      this.loadinginformationShow = false
    },
    //装货-接口
    async handleLoadConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchLoad',
        { dispatchId: this.obj.dispatchId, ...val }
      )
      if (code == '0') {
        this.$api.msg(`装货成功`)
        this.loadinginformationShow = false
        this.searchBtn()
      } else {
        this.$api.msg(message)
      }
    },
    //到货信息弹窗-开启
    dispatchArrive(val) {
      this.obj = val
      this.arrivalinformationModalShow = true
    },
    //到货信息弹窗-确认
    arrivalinformationconfirm(val) {
      this.handleArriveConfirm(val)
    },
    //到货信息弹窗-取 消
    arrivalinformationcancel() {
      this.arrivalinformationModalShow = false
    },
    //到货-接口
    async handleArriveConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchArrive',
        { dispatchId: this.obj.dispatchId, ...val }
      )
      if (code == '0') {
        this.$api.msg(`到货成功`)
        this.arrivalinformationModalShow = false
        this.searchBtn()
      } else {
        this.$api.msg(message)
      }
    },
    //到货信息图片弹窗-开启
    dispatchPhotoArrive(val) {
      this.obj = val
      this.arrivalinformationPhotoModalShow = true
    },
    //到货信息图片弹窗-确认
    arrivalinformationPhotoconfirm(val) {
      this.handleArrivePhotoConfirm(val)
    },
    //到货信息图片弹窗-取 消
    arrivalinformationPhotocancel() {
      this.arrivalinformationPhotoModalShow = false
    },
    //到货图片-接口
    async handleArrivePhotoConfirm(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/uploadArrivePic',
        { dispatchId: this.obj.dispatchId, ...val }
      )
      if (code == '0') {
        this.$api.msg(`到货磅单上传成功`)
        this.arrivalinformationPhotoModalShow = false
        this.searchBtn()
      } else {
        this.$api.msg(message)
      }
    },
    change(index) {
      console.log(index)
      this.showLoading()
      this.pageNum = 1
      this.pageSize = 10
      this.searchObj.dispatchCode = ''
      this.current = index

      switch (index) {
        case 0:
          this.dispatchStatus = '0'
          break
        case 1:
          this.dispatchStatus = '2'
          break
        case 2:
          this.dispatchStatus = '3'
          break
        case 3:
          this.dispatchStatus = '4'
          break
      }
      this.getDataList()
    },
    //跳转到详情页面
    routeJumpBtn(val) {
      uni.navigateTo({
        url: `/pages/drivertabbar/waybill/detail?id=${val.dispatchId}`,
      })
    },
    // 确认接单
    async dispatchSend(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchConfirm',
        { dispatchId: val.dispatchId }
      )
      if (code == '0') {
        this.$api.msg('确认接单成功')
        this.searchBtn()
      } else {
        this.$api.msg(message)
      }
    },
    // 取消接单
    async dispatchCancelSend(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDispatch/driver/dispatchCancel',
        { dispatchId: val.dispatchId }
      )
      if (code == '0') {
        this.$api.msg('取消接单成功')
        this.searchBtn()
      } else {
        this.$api.msg(message)
      }
    },
    //订单
    async getDataList(searchObj) {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        dispatchStatus: this.dispatchStatus,
      }
      if (searchObj) {
        this.searchObj = searchObj

        params.dispatchCode = this.searchObj.dispatchCode
      }
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightDispatch/driver/app/dispatchPage',
        params
      )
      if (code === '0') {
        this.hideLoading()
        this.taglistShow = result.records.length ? true : false
        this.loadStatus =
          result.records.length < this.pageSize ? 'nomore' : 'loadmore'
        if (this.pageNum == 1) {
          this.dataList = result.records
        } else {
          this.dataList = this.dataList.concat(d_resNull(result.records))
        }
      } else {
        this.hideLoading()
        this.$api.msg(message)
      }
      this.closePop()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  z-index: 11;
  min-height: 1600rpx;
  padding-bottom: 140rpx;
  background-color: rgb(238, 238, 239);
  .modal1 {
    ::v-deep .u-model {
      background-color: transparent !important;
    }
    ::v-deep .u-mode-center-box {
      background-color: transparent !important;
    }
  }

  .tabs-cont {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
  }

  .card-list {
    padding-top: 100rpx;
    padding-bottom: 80rpx;
    margin: 0 30rpx;
  }
}
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

.u-body-item {
  font-size: 24rpx;
  color: #333;
  padding: 10rpx 4rpx;
  display: flex;
  justify-content: space-between;
}

.kong {
  padding: 200rpx 0;
}
.reqiured-star::before {
  content: '*';
  color: red;
  width: 4px;
  height: 4px;
}

.driverName-box {
  white-space: nowarp;
  padding: 32rpx;
  line-height: 60rpx;
  text-align: center;
}
.tabbar-class {
  position: fixed;
  z-index: 11;
}
</style>
